<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
		
		<script src="../../libs/js/graphical/raphael.js" type="text/javascript"></script>
		<script src="../../libs/js/graphical/progress.js" type="text/javascript"></script>
		
		<link rel="stylesheet" type="text/css" href="style/style.css"/>
		<style type="text/css">
			body{
				background: #F8F8F8;
			}
			/*.timeline ul li.circle1 {
				background-image: url(timeline/circle1.png);
			}
			
			.timeline ul li.circle2 {
				background-image: url(timeline/circle2.png);
			}
			
			.timeline ul li.circle3 {
				background-image: url(timeline/circle3.png);
			}
			
			.timeline ul li.circle4 {
				background-image: url(timeline/circle4.png);
			}*/

			.timeline ul li{
				background-color: #F8F8F8;
				padding: 0;
				margin-bottom: 20px;
			}
			#holder {
                position: relative;
                width: 150px;
                height: 150px;
                /*margin: 10px auto;*/
               float: left;
               margin-left: 15px;
            }
		    .ring_text1{
		        position: absolute;
		        top:40%;
		        left: 0px;
		        font-size: 30px;
		        color: #63BF5C;
		        font-weight: bold;
		        width: 100%;
		        text-align: center;
		    }

		</style>
	</head>

	<body>
		<div class="content_1">
			<div class="left">
				<img src="style/head_icon.png" />
				<p>引领视觉科技 Quick UI</p>
				<span>前端工程师/JUN_Li</span>
				<button type="button" class="button"><span class="icon_edit">编辑</span></button>
				<div class="clear"></div>
			</div>
			<div class="right">
				<button type="button" class="Release button">发布素材</button>
				<p>上次登录时间：<span>2017年1月20日</span></p>
			</div>
			<div class="clear"></div>
		</div>
		<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
			<tr>
				<td style="width: 100%;">
					<div style="height: 630px;">
						
						<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
							<tr>
								<td style="width: 100%;">
									<div class="cont_win">
										<div class="content_2">
											<div class="title">
												<span>我的积分</span>
											</div>
											<div id="holder">
									            <div class="ring_text1">10,199</div>
									    	</div>
									    	<div id="">
												<p style="margin-top: 50px;"><i></i>可用积分 9999.0</p>
												<p><i style="background: #E6A56A;"></i>冻结积分 200.0</p>
											</div>
											<div class="btn_win">
												<button type="button" class="button">充值</button>
												<button type="button" class="button">提现</button>
											</div>
										</div>
									</div>
								</td>
								<td style="width: 235px;">
									<div class="content_3">
										<div class="text">
											<p class="title">本月收入</p>
											<span>¥24,666,888</span>
											<p>下载收入：150,0</p>
											<p>平台分成：50,00</p>
											<div class="fg"></div>
											<button class="button" class="button">查看明细</button>
										</div>
									</div>
								</td>
							</tr>
						</table>
						<div class="cont_win2">
							<div class="content_4">
								<div class="title">
									<span>统计信息</span>
								</div>
								<ul class="list">
									<li>
										<i></i>
										<a href="javascript:;">文章总数</a>
										<span>59</span>
										<div class="clear"></div>
									</li>
									<li>
										<i></i>
										<a href="javascript:;">文章总数</a>
										<span>59</span>
										<div class="clear"></div>
									</li>
									<li>
										<i></i>
										<a href="javascript:;">文章总数</a>
										<span>59</span>
										<div class="clear"></div>
									</li>
									<li>
										<i></i>
										<a href="javascript:;">文章总数</a>
										<span>59</span>
										<div class="clear"></div>
									</li>
									<li>
										<i></i>
										<a href="javascript:;">文章总数</a>
										<span>59</span>
										<div class="clear"></div>
									</li>
									
									<div class="clear"></div>
								</ul>
							</div>
						</div>
					</div>
				</td>
				<td style="width: 335px;">
					<div style="width:335px;height: 630px;" >
						<div class="content_5">
							<span>消息通知</span>
							<div class="timeline">
								<ul>
									<li class="cls highlight">
										<p class="date_time">9月1日</p>
										<p class="intro">Quick UI2.0正式上线</p>
									</li>
									<li class="cls">
										<p class="date_time">8月1日</p>
										<p class="intro">Quick UI2.0 内测开始</p>
									</li>
									<li class="cls">
										<p class="date_time">7月1日</p>
										<p class="intro">新版本皮肤包完成</p>
									</li>
									<li class="cls">
										<p class="date_time">6月1日</p>
										<p class="intro">Quick UI 正式上线</p>
									</li>
									<li class="cls">
										<p class="date_time">5月1日</p>
										<p class="intro">Quick UI 内测开始</p>
									</li>
									<li class="cls highlight">
										<p class="date_time">9月1日</p>
										<p class="intro">Quick UI2.0正式上线</p>
									</li>
									<li class="cls">
										<p class="date_time">8月1日</p>
										<p class="intro">Quick UI2.0 内测开始</p>
									</li>
									<li class="cls">
										<p class="date_time">7月1日</p>
										<p class="intro">新版本皮肤包完成</p>
									</li>
									<li class="cls">
										<p class="date_time">6月1日</p>
										<p class="intro">Quick UI 正式上线</p>
									</li>
									<li class="cls">
										<p class="date_time">5月1日</p>
										<p class="intro">Quick UI 内测开始</p>
									</li>
									<li class="cls highlight">
										<p class="date_time">9月1日</p>
										<p class="intro">Quick UI2.0正式上线</p>
									</li>
									<li class="cls">
										<p class="date_time">8月1日</p>
										<p class="intro">Quick UI2.0 内测开始</p>
									</li>
									
								</ul>
							</div>

						</div>
					</div>
				</td>
			</tr>
		</table>
		<script>
			var radius = 70;
		          
		    var paramBg = {stroke: "#E6A56A", "stroke-width": 5};
		    var paramGreen = {stroke: "#63BF5C", "stroke-width": 6,"stroke-linecap":"round"};
		    $(function(){
		       	var paper =initPaper("holder", 150, 150);   
		        //paper,current,min,max,cx,cy,radius,param,paramBg
		        drawRingProgress(paper,23,0,30,75,75,radius,paramGreen,paramBg);
		
		
		
		    })
		</script>

	</body>

</html>